page{
	background-color: #eeee;
}
.basicBox{
	background-color: $color-primary;
	display: flex;
	justify-content: space-between;
	padding: 20upx;
	box-sizing: border-box;
	align-items: center;
}
.listBox{
	background-color: #fff;
	padding: 20upx 0;
	>.every{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20upx;
		align-items: center;
		>.left{
			font-size: $fontSize-lg;
		}
		>.right{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 90%;
			border-bottom: 1px solid $color-border;
			padding: 20upx 0;
			>.iconfont{
				font-size: $fontSize-base;
				transform: rotateZ(180deg);
			}
			>.name{
				font-size: $fontSize-base;
			}
		}
	}
}
.otherBox{
	width: 300upx;
	margin: 0 auto;
	margin-top: 40upx;
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	font-size: $fontSize-base;
	text-decoration: underline;
}

.header{
	padding-top: 80upx;
	width: 100%;
	background-color: $color-primary;
	position: relative;
	> .item{
		position: absolute;
		top: 60upx;
		right: 20upx;
		text-align: center;
		> .imgBox{
			margin: 0 auto;
			width: 56upx;
			height: 48upx;
			position: relative;
			top: 50rpx;
			> image{
				width: 100%;
				height: 100%;
			}
		}
		> .txt{
			// font-weight: bold;
			color: #888888;
			font-size: 26upx;
			margin-top: 26upx;
		}
	}
	>.top{
		box-sizing: border-box;
		padding:30upx 32upx;
		align-items: center;
		> .searchText{
			padding-left: 30upx;
		}
		> .searchIcon{
			font-size: 35upx;
			margin-left: 30upx;
		}
		>.searchBox{
			background-color: #fff;
			display: flex;
			align-items: center;
			border-radius: 20px;
			box-sizing: border-box;
			width: 85%;
			padding: 10upx 20upx;
			>input{
				font-size: $fontSize-base;
				margin-left: 20px;
				width: 100%;
			}
		}
		>.btnGroup{
			display: flex;
			justify-content: space-between;
			width: 15%;
			align-items: center;
			>.iconfont{
				color: $color-font;
				font-size:$fontSize-lg ;
			}
		}
		>.left{
			display: flex;
			align-items: center;
			>.headPortrait{
				
				border-radius: 50%;
				width: 120upx;
				height: 120upx;
				>image{
					width: 100%;
					height: 100%;
				}
			}
			>.msg{
				color: $color-font;
				margin-left: 25upx;
				display: flex;
				flex-direction: column;
				> .msgTop{
					display: flex;
					align-items: center;
					>.name{
						font-size: 35upx;
						font-weight: bold;
						padding-right: 34upx;
					}
					button{
						height: 60upx;
					}
				}
				> .msgBot{
					display: flex;
					align-items: center;
					> .tel{
						font-size: 28upx;
						margin-top: 10upx;
						padding-right: 30upx;
					}
					> text{
						text-decoration: underline;
						color: #EEEEEE;
					}
				}
				
				
			}
		}
		>.icon-fanhui{
			transform: rotateZ(180deg);
			color: $color-font;
		}
	}
	>.bottom{
		color: $color-font;
		font-size: $fontSize-lg;
		padding: 20upx;
	}
	.right{
		margin-top: 50upx;
		> .list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			> .item{
				padding: 0 20rpx;
				text-align: center;
				.number{
					font-size: 26upx;
					color: #FFFFFF;
				}
				> .cash{
					overflow: hidden;
					text-overflow: ellipsis;
				}
				> .title{
					margin-bottom: 20upx;
					color: #FFFFFF;
					font-size: 26upx;
				}
			}
		}
	}
}

.content{
	padding: 20upx;
	.vipTask{
		width: 100%;
		height: 114upx;
		background-color: #FFFFFF;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.leftTitle{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #000000;
			font-size:26upx;
			border-right: 1px solid #F5F5F5;
			.king{
				width: 36upx;
				height: 36upx;
			}
		}
		.rightTitle{
			width: 50%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #000000;
			font-size:26upx;
			.sign{
				color: #FFFFFF;
				text-align: center;
				line-height: 60upx;
				font-size: 32upx;
			}
		}
		.icont{
			width: 60upx;
			height: 60upx;
			background-image: url('../../static/img/MyVipBG.png');
			background-size: 100%;
			background-repeat: no-repeat;
			margin-right: 10upx;
		}
	}
	> .order{
		margin-top: 40upx;
		border-radius: 10upx;
		background: #fff;
		padding: 30upx 0upx;
		> .top{
			padding-bottom: 20upx;
			margin: 0 30upx 10upx 30upx;
			border-bottom: 1px solid #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				font-weight: bold;
			}
			> .right{
				display: flex;
				align-items: center;
				color: #999999;
				> .rightIcon{
					font-size: $fontSize-base;
					transform: rotateZ(180deg);
				}
			}
		}
		> .morebottom{
			// padding: 30upx 0upx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			// justify-content: space-around;
			> .item{
				text-align: center;
				width: 20%;
				margin-top: 40upx;
				> .imgBox{
					margin: 0 auto;
					width: 56upx;
					height: 48upx;
					position: relative;
					> image{
						width: 100%;
						height: 100%;
					}
				}
				> .txt{
					// font-weight: bold;
					color: #888888;
					font-size: 26upx;
					margin-top: 26upx;
				}
			}
		}
		> .bottom{
			padding: 30upx 0upx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			> .item{
				text-align: center;
				> .imgBox{
					margin: 0 auto;
					width: 60upx;
					height: 50upx;
					position: relative;
					> image{
						width: 100%;
						height: 100%;
					}
				}
				> .txt{
					// font-weight: bold;
					color: #888888;
					font-size: 26upx;
					margin-top: 26upx;
				}
			}
		}
	}
	
	.shoplist{
		margin-top: 30upx;
		background: #FFFFFF;
		border-radius: 10upx;
		> .top{
			height: 40upx;
			padding:  10upx 10upx 0 10upx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			> .left{
				width: 8upx;
				height: 100%;
				background: $base-color;
				border-radius:10upx ;
				margin-right: 20upx;
			}
			> .right{
				font-weight: bold;
			}
		}
	}
}